<template>
  <div id="purchaseRequest">
    <h3>采购申请单</h3>
    <!--新增-->
      <el-button type="primary" plain @click="addGoodsBtn">
        <i class="el-icon-circle-plus"></i>
        添加商品
      </el-button>

      <el-button type="warning" plain @click="">
        <i class="el-icon-delete-solid"></i>
        删除商品
      </el-button>
    <div style="float: right" >
      <el-button type="success" plain @click="submitBtn">
        <i class="el-icon-user-solid"></i>
        提交申请
      </el-button>
      <el-button plain @click="">
        <i class="el-icon-refresh"></i>
        重置数据
      </el-button>
    </div>


    <el-input size="medium"  v-model="purchase.register" placeholder="请输入登记人"></el-input>

    <!--采购单-->
    <el-table
        ref="multipleTable"
        :data="purchase.supplierGoodsDtoList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="goodsId"
          label="编号">
      </el-table-column>
      <el-table-column
          prop="goodsImgLink"
          label="商品图片">
        <template slot-scope="scope">
          <el-avatar :size="45" shape="square" :src="scope.row.goodsImgLink" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column
          prop="goodsName"
          label="商品名称">
      </el-table-column>
      <el-table-column
          label="供应商公司名称(联系电话)">
        <template slot-scope="scope">
          <span>{{ scope.row.companyName +"--"+ scope.row.supplierPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="unit"
          label="单位">
      </el-table-column>
      <el-table-column
          prop="price"
          label="单价(元)">
      </el-table-column>
      <el-table-column
          width="150"
          label="数量(件)">
        <template slot-scope="scope">
          <el-input-number size="mini" v-model="scope.row.amount " :min="1" :max="10000" ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
          label="小计">
        <template slot-scope="scope">
          <span>{{ scope.row.price * scope.row.amount }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!--商品信息抽屉-->
    <el-drawer
        title="商品列表!"
        :visible.sync="table"
        direction="rtl"
        size="50%">

      <!--条件查询-->
      <el-form :inline="true" :model="searchObj" ref="formList" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="searchObj.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="上下架">
          <el-select v-model="searchObj.status" placeholder="请选择" clearable>
            <el-option
                v-for="item in shangXiaJia"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="一级分类">
          <el-select v-model="firstKind" placeholder="请选择" clearable>
            <el-option
                v-for="item in firstKindList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类">
          <el-select v-model="secondKind" placeholder="请选择" clearable>
            <el-option
                v-for="item in secondKindList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="queryBtn">查询</el-button>
          <el-button @click="resetForm('formList')">
            <i class="el-icon-refresh-right"></i>
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <!--数据表格-->
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
      >
        <el-table-column
            prop="goodsInfo.id"
            label="编号">
        </el-table-column>
        <el-table-column
            prop="imgLink"
            label="商品图片">
          <template slot-scope="scope">
            <el-avatar :size="45" shape="square" :src="scope.row.imgLink" @error="errorHandler">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column
            prop="goodsInfo.name"
            label="商品名称">
        </el-table-column>
        <el-table-column
            label="类型">
          <template slot-scope="scope">
            <span>{{ getType(scope.row.goodsInfo.goodsCategoryId) }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="goodsInfo.unit"
            label="单位">
        </el-table-column>
        <el-table-column
            prop="goodsInfo.price"
            label="单价">
        </el-table-column>

        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button
                @click="supplier(scope.row.goodsInfo.id)"
                type="text"
                size="small"
                icon="el-icon-view">
              查看供应商
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizeList"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-drawer>
    <!--查看供应商抽屉-->
    <el-drawer
        title="供应商商品"
        :visible.sync="dialog"
        direction="rtl"
        size="50%">

      <!--条件查询-->
      <el-form :inline="true" :model="searchSupplier" ref="SupplierList" class="demo-form-inline">
        <el-form-item label="供应商公司名称">
          <el-input v-model="searchSupplier.companyName" placeholder="请输入名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="querySupplier">查询</el-button>
        </el-form-item>
      </el-form>

      <!--数据表格-->
      <el-table
          ref="multipleTable"
          :data="supplierGoods"
          tooltip-effect="dark"
          style="width: 100%"
      >
        <el-table-column
            prop="goodsId"
            label="编号">
        </el-table-column>
        <el-table-column
            prop="goodsImgLink"
            label="商品图片">
          <template slot-scope="scope">
            <el-avatar :size="45" shape="square" :src="scope.row.goodsImgLink" @error="errorHandler">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名称">
        </el-table-column>
        <el-table-column
            label="供应商公司名称(联系电话)">
          <template slot-scope="scope">
            <span>{{ scope.row.companyName +"--"+ scope.row.supplierPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="unit"
            label="单位">
        </el-table-column>
        <el-table-column
            prop="price"
            label="单价">
        </el-table-column>

        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button
                @click="AddPurchase(scope.row)"
                type="text"
                size="small"
                icon="el-icon-sold-out">
              添加采购
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :current-page="currentPage2"
          :page-sizes="pageSizeList"
          :page-size="pageSize2"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total2">
      </el-pagination>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "PurchaseRequest",
  data() {
    return {


      purchase: {
        //登记人
        register: "",

        //采购单数据
        supplierGoodsDtoList:[],
      },

      //商品id
      goodsId:"",

      searchSupplier: {

      },
      //供应商商品
      supplierGoods: [],
      // 当前页号
      currentPage2: 1,
      // 当前页大小
      pageSize2: 5,
      // 总记录数
      total2: 10,

      dialog: false,

      table: false,
      //一级类别
      firstKindList: [],
      //二级类别
      secondKindList: [],
      //上下架下拉框
      shangXiaJia: [
        {
          value: 1,
          label: '上架'
        },
        {
          value: 0,
          label: '下架'
        },
      ],
      //商品类型级别
      goodsTypeLevel: [],
      //批量选中的row
      multipleSelection: [],
      //查询条件对象
      searchObj: {
        name: "",
        status: "",
        goodsCategoryId: "",
      },
      firstKind: "",
      secondKind: "",
      // 当前页号
      currentPage: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 10,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      // 返回数据对象
      tableData: [],

      // 商品类型列表
      goodsTypeList: [],
    }
  },
  methods: {

    //提交申请
    async submitBtn() {
      if(this.purchase.register == "") {
        return this.$message.warning("请输入登记人采购再提交！");
      }
      if(this.purchase.supplierGoodsDtoList.length ==0 ){
        return this.$message.warning("请添加商品采购再提交！");
      }
      const {data : res} = await this.$http.post(`/purchaseOrder/createPurchase`,this.purchase);
      this.$message.success(res);
      this.purchase = [];
    },

    //批量选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //添加采购
    AddPurchase(row) {
      this.purchase.supplierGoodsDtoList.push(row);
    },
    //添加商品按钮
    addGoodsBtn () {

      this.table = true;
    },

    //供应商商品
    async querySupplier() {
      this.dialog = true;
      const { data: res } = await this.$http.post(`/supplierProduct/querySupplier/${this.goodsId}/${this.currentPage2}/${this.pageSize2}`,this.searchSupplier);
      this.supplierGoods  = res.rows;
      this.total2 = res.total;

    },
    //查看供应商
    supplier(id) {
      this.goodsId = id;
      this.querySupplier();
    },
    //类型
    getType(id) {
      let typeId = id.split("-");
      const data = this.goodsTypeList;
      let typeAry = [];
      for(let t=0;t<typeId.length;t++){
        for(let i=0;i<data.length;i++) {
          if(typeId[t] == data[i].id ) {
            typeAry.push(data[i].categoryName)
          }
        }
      }
      let typeName = typeAry.join('/')
      return typeName
    },
    //查询
    async queryBtn() {
      this.searchObj.goodsCategoryId = this.firstKind+"-"+this.secondKind
      const { data: res } = await this.$http.post(`/goodsInfo/getGoodsList/${this.currentPage}/${this.pageSize}`,this.searchObj);
      this.tableData = res.rows;
      this.total = res.total;
    },
    //重置
    resetForm(formName) {
      console.log(formName)
      console.log(this.$refs[formName])
      this.$refs[formName].resetFields();
    },
    //页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.queryBtn()
    },
    //当前页改变
    handleCurrentChange(val){
      this.currentPage = val
      this.queryBtn()
    },
    //页大小改变
    handleSizeChange2(val) {
      this.pageSize2 = val
      this.querySupplier()
    },
    //当前页改变
    handleCurrentChange2(val){
      this.currentPage2 = val
      this.querySupplier()
    },
    //头像展示失败
    errorHandler() {
      return true
    },
    //查询商品类型级别
    async queryGoodsTypeLevel() {
      const { data: res } = await this.$http.post(`/goodsCategory/queryGoodsTypeLevel`);
      this.goodsTypeLevel = res;
    },
    //商品类型列表
    async queryGoodsType() {
      const { data: res } = await this.$http.post(`/goodsCategory/queryGoodsCategoryList`);
      this.goodsTypeList = res
      for(let i=0;i<res.length;i++ ){
        if(res[i].level === 1){
          this.firstKindList.push(res[i])
        }
        if (res[i].level === 2){
          this.secondKindList.push(res[i])
        }
      }
    }
  },
  created() {
    //商品类型列表
    this.queryGoodsType();

    this.queryBtn();

    //查询商品类型级别
    this.queryGoodsTypeLevel();

  }
}
</script>

<style scoped>

</style>